<template>
<!-- 谁是我的新郎 -->
<h1 :style="{color:redcolor,backgroundColor:backgroundColor}">谁是我的新郎</h1>
<!-- 水果哥 -->
<li  class="fruit-li" v-for="fruits in fruit">{{ fruits }}</li>
<!-- 数据典藏+渲染嵌套列表秘籍 -->
<li v-for="(student,index) in Student" :key="student.name">{{index+1}}-{{student.name}}-{{student.age}}</li>
<!-- 找出害羞的他 -->
<div>
<input type="text" placeholder="请写出你要的内容" v-model="keyword">
<input type="button" value="将内容出现吧"  aria-colspan="3" @click="add()">
<p v-if="showContent">{{ showContent }}</p>
</div>
</template>
<script setup>  
import {ref} from 'vue'
let fruit =ref([
['苹果', '香蕉', '橙子'],
])
let redcolor = ref('red')
let backgroundColor = ref('purple')
let Student = ref([
  {
  name:'葫芦小金刚',
  age:16
},
{
  name:'凹凸曼',
  age:18
},  
{
  name:'爱洗澡的鳄鱼',
  age:20
},
]
)
let keyword=ref('')
let showContent=ref('')
function add(){
  if(keyword.value.trim()){
    showContent.value=keyword.value
    keyword.value=''
   
  }
}
</script>
<style>
.fruit-li{
  list-style-type: none;
}
</style>